<template>
	<view>
		<view class="starStyle">
			<text>{{average}}</text>
			<u-rate active-color="#F99939" inactive-color="#b2b2b2" gutter="20" :count="count" v-model="average" size="50" :disabled="true"></u-rate>
		</view>
		<view>
			<view>
				<view class="titleStyle">全部评价</view>
				<view>
					<view v-for="(item,index) in evaluates" :key="index">
						<u-card :title="item.userName" :sub-title="item.releaseData" :title-size="40" :thumb="item.avatar" :thumb-circle="true" :thumb-width="80">
							<view class="" slot="body">
								<view style="margin-bottom: 20rpx;">
									<u-rate active-color="#F99939" inactive-color="#b2b2b2" gutter="20" :count="count" v-model="item.courseScore" :disabled="true"></u-rate>
								</view>
								<view class="u-body-item u-flex u-col-between u-p-t-0">
									<view class="u-body-item-title contentStyle">{{item.courseEvaluate}}</view>
								</view>
							</view>
						</u-card>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 110rpx;"></view>
	</view>
</template>
<script> 
	import {
		getCourseEvaluate
	} from '@/api/modules/joinCourse.js'
	
	export default {
		data() {
			return {
				url: this.GOBAL.baseURL,
				count: 5,
				courseId:1,
				value: 3,
				average: 4.7,
				evaluates:[{
					courseScore:'',
					releaseData:'',
					courseEvaluate:'',
					userName:'',
					avatar:'',
				}],
			};
		},
		props: {
			courseID: {
				type: String,
				default: 'Add'
			}
		},
/* 		mounted(){
			let data = {
					courseId: 1
				}
					
				let that = this;
				
				getCourseEvaluate(data)
					.then(resp => {
						that.evaluates = resp.data.evaluatelist
						for (let i = 0; i < resp.data.evaluatelist.length; i++) {
							that.evaluates[i].avatar = 'http://localhost:8888/onlineLearning/resources/userImages/' + this.evaluates[i].avatar;
						}
						that.average = resp.data.courseAvg
						// that.$nextTick(() => {
						// 	that.$refs.collapseInit1.init()
						// })
						//console.log(JSON.parse(resp.data))
					})
					.catch(resp => {})
			
		}, */
		watch: {
		
			courseID: {
				immediate: true, // 这句重要
				handler(val) {
					// 继续要处理的事件
					// 获取课程ID对应的章节列表
					let data = {
						courseId: this.courseID
					}
		
					let that = this;
					
					that.courseInfoID = val;
		
					getCourseEvaluate(data)
						.then(resp => {
							that.evaluates = resp.data.evaluatelist
							for (let i = 0; i < resp.data.evaluatelist.length; i++) {
								that.evaluates[i].avatar = that.url + 'userImages/' + this.evaluates[i].avatar;
							}
							that.average = resp.data.courseAvg
							// that.$nextTick(() => {
							// 	that.$refs.collapseInit1.init()
							// })
							//console.log(JSON.parse(resp.data))
						})
						.catch(resp => {})
				}
			}
		
		}
	};
</script>

<style scoped lang="scss">
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.titleStyle {
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.starStyle {
		margin-left: 30rpx;
		margin-top: 50rpx;
		font-size: 60rpx;
		color: #F99939;
	}
	.headStyle {
		height: 100rpx;
		width: 450rpx;
	}
</style>
